<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Drag Box</title>
    <script src='../lib/ol6.15.1/ol.js'></script>
    <link rel='stylesheet' href='../css/ol6.15.1/ol.css'>
    <link rel='stylesheet' href='../css/main.css'>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
            background: rgba(255, 0, 255, 0.2);
        }

        .layer {
            background: rgba(0, 255, 0, 0.6);
        }
    </style>
</head>
<body>
<div id='map' style='width:800px;height:800px;'></div>
<h1 id='msg'></h1>
<script>
	// 创建要素图层
	var vectorLayer = new ol.layer.Vector({
		source: new ol.source.Vector({
			features: [
				new ol.Feature({
					geometry: new ol.geom.Polygon([[
						[119.0, 29.0],
						[119.2, 29.0],
						[119.2, 29.2],
						[119.0, 29.2],
						[119.0, 29.0]
					]]),
					name: 'A'
				}),
				new ol.Feature({
					geometry: new ol.geom.Polygon([[
						[119.4, 29.0],
						[119.6, 29.0],
						[119.5, 29.2],
						[119.4, 29.0]
					]]),
					name: 'B'
				}),
				new ol.Feature({
					geometry: new ol.geom.LineString([
						[119.0, 29.4],
						[119.2, 29.3],
						[119.4, 29.5],
						[119.6, 29.3],
						[119.8, 29.6]
					]),
					name: 'C'
				}),
				new ol.Feature({
					geometry: new ol.geom.Point([119.4, 29.6]),
					name: 'D'
				})
			]
		}),
		style: new ol.style.Style({
			image: new ol.style.Circle({
				radius: 30,
				stroke: new ol.style.Stroke({
					width: 4,
					color: 'blue'
				}),
				fill: new ol.style.Fill({
					color: 'yellow'
				})
			}),
			stroke: new ol.style.Stroke({
				width: 4,
				color: 'blue'
			}),
			fill: new ol.style.Fill({
				color: 'yellow'
			})
		})
	});

	// 创建选择工具，用于盛放矩形框内的要素
	var select = new ol.interaction.Select({
		condition: ol.events.condition.never,
		style: (e) => {
			return vectorLayer.getStyle();
		}
	});

	// 创建绘制工具
	var dragBox = new ol.interaction.DragBox({
		condition: ol.events.condition.always
	});

	// 开始绘制，清除已有要素
	dragBox.on('boxstart', function () {
		select.getFeatures().clear();
	});

	// 结束绘制
	dragBox.on('boxend', function () {
		// 获取被选择的要素
		var extent = dragBox.getGeometry().getExtent();
		console.log(extent);
		vectorLayer.getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
			select.getFeatures().push(feature);
		});

		// 遍历被选中的要素
		var selected = [];
		var selectedFeatures = select.getFeatures();
		for (var i = 0; i < selectedFeatures.getLength(); i++) {
			var feature = selectedFeatures.item(i);
			var name = feature.get('name');
			selected.push(name);
		}

		// 输出查询结果
		var msg = selected.join('、');
		document.getElementById('msg').innerText = '被选中的要素：' + msg;
	});

	// 创建地图
	var map = new ol.Map({
		target: 'map',
		layers: [
			vectorLayer
		],
		view: new ol.View({
			projection: 'EPSG:4326',
			center: [119.2, 29.2],
			zoom: 10
		})
	});

	// 添加交互工具
	map.addInteraction(dragBox);
	map.addInteraction(select);
</script>
</body>
</html>
